<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
	<title>Superfinanzapp</title>

	<!-- Le styles -->
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<link rel="stylesheet" href="css/redmond/jquery-ui-1.9.2.custom.css" />
	<style type="text/css">
	body {
		padding-top: 20px;
	}
	.userinfo {
		float:right;
		font-weight: lighter;
	}
	.userinfo img {
		height: 26px;
	}
	.container {
		width: 700px;
	}
	.tab-content {
		padding: 15px;
		border: 1px solid #fafafa;
		border-radius: 4px;
		min-height: 600px;
	}
	ul.nav {
		margin-top: 36px;
		margin-bottom: 0px;
	}
	ul.nav li {
		float:right;
	}


	.progress {
		height:auto;
	}
	.progress .bar {
		padding:10px;
		text-align: left;
		font-size: 1em;
		font-weight: lighter;
	}
	.progress span {
		float:right;
		padding: 10px;
		font-weight: bold;
	}
	.progress .bar img {
		height: 20px;
	}
	.progress:hover {
		text-decoration: none;
		cursor: pointer;
		font-weight: bold;
	}
	a.bar:hover {
		text-decoration: none;
		font-weight: bold;
	}
	.well label {
		font-weight: bold;
	}
	.well .input-append {
		float: right;
	}
	.well .input-append input {
		text-align: right;
	}
	.table img {
		height: 20px;
	}
	.table .captioncol {
		width: 50%;
	}
	.table .middlecol {
		width: 15%;
		text-align: center;
	}
	.table .pricecol {
		width: 35%;
		text-align: right;
	}
	.table tr .hoveredit {
		display: none;
		color: blue;
		font-size: smaller;
		font-weight: lighter;
	}
	.table tr:hover .hoveredit {
		display: inline;
	}
	.table tr .nameedit {
		display: none;
	}
	.table img:hover {
		cursor: pointer;
	}
	.dropdown-menu img {
		height: 20px;
	}
	.dropdown-toggle img {
		height: 20px;
	}
	.modal {
		width: 400px;
		margin-left: -200px;
	}
	.table .middlecol span {
		cursor: pointer;
	}
	.datePopover {
		position:absolute;
		border-width:thin;
		border-style:solid;
		border-color: silver;
		background-color:Menu;
		height:80px;
		width:220px;
		top:33px;
		left:-110px;
		display:none;
		z-index:1;
	}
	.datePopover .popoverMouseSensor {
		position:absolute;
		border-width:0px;
		background-color:transparent;
		height:118px;
		width:220px;
		top:-38px;
		left:0px;
	}
	.datePopover .popoverDropdown {
		position:absolute;
		bottom:43px;
		right:10px;
	}
	.datePopover .btn {
		width:79px;
		text-align:left
	}
	.datePopover .popoverEdit {
		position:absolute;
		bottom:7px;
		right:10px;
	}
	.datePopover .editDate {
		position:absolute;
		right:10px;
	}
	#dropdownImg {
		display:none;
	}
	#expenses h1 .btn {
		font-weight:normal;
	}
	#expenses h1 small {
		cursor:pointer;
		float:right;
		vertical-align: bottom;
		margin-top: 10px;
	}
	#expFilterForm {
		display:none;
	}
	#countInfo {
		font-style:italic;
		font-size:smaller;
		font-weight:lighter;
		color:silver;
	}
	#repetitiveInfo {
		display:none;
	}
	.pricecol div {
		width: 100%;
	}
	.pricecol input {
		width: 70px;
		text-align:right;
	}
	.pricecol input.plain {
		border: 1px solid transparent;
		background: transparent;
		box-shadow: none;
	}
	.table td {
		vertical-align: middle;
	}
	</style>
	<script type="text/javascript">
	<!--
	function switchToPiechart() {
	   var pie = document.getElementById('pie');
	   var bars = document.getElementById('bars');
	   var label = document.getElementById('diagrammtyp_label');
	   pie.style.display = "block";
	   bars.style.display = "none";
	   label.textContent="Kreisdiagramm";
	}
	function switchToBarschart() {
	   var pie = document.getElementById('pie');
	   var bars = document.getElementById('bars');
	   var label = document.getElementById('diagrammtyp_label');
	   bars.style.display = "block";
	   pie.style.display = "none";
	   label.textContent="Balkendiagramm";
	}
	function switchToByTime() {
	   var cat = document.getElementById('stat_by_category');
	   var time = document.getElementById('stat_by_time');
	   time.style.display = "block";
	   cat.style.display = "none";
	   document.getElementById("statHeadline").textContent = "Ausgaben im letzten Monat";
	}
	function switchToByCategory() {
	   var cat = document.getElementById('stat_by_category');
	   var time = document.getElementById('stat_by_time');
	   cat.style.display = "block";
	   time.style.display = "none";
	   document.getElementById("statHeadline").textContent = "Ausgaben im letzten Quartal";
	}
	
	function showEdit(elem) {
		var par = elem.parentNode.parentNode;
		var edit = par.getElementsByTagName("input");
		var stat = par.getElementsByTagName("span");
		edit[0].value = "";
		stat[0].style.display="none";
		edit[0].style.display="inline";
		edit[0].focus();
		edit[0].select();
	}
	function endEdit(elem) {
		var par = elem.parentNode;
		var edit = par.getElementsByTagName("input");
		var stat = par.getElementsByTagName("span");
		stat[0].style.display="inline";
		edit[0].style.display="none";
	}
	function editKey(e, elem) {
		if (e.charCode) {
			if (e.charCode == 13) {
				endEdit(elem);
			}
		} else {
			if (e.keyCode == 13) {
				endEdit(elem);
			}
		}
	}
	function newCategory(editLink) {
		showEdit(editLink);
		editLink.parentNode.parentNode.getElementsByTagName("input")[0].value = "Neue Kategorie";
		editLink.parentNode.parentNode.getElementsByTagName("input")[0].select();
	}
	function expandPopover(element) {
		var test = $(".datePopover");
		test.slideUp(400);
		//element.stop(true);
		element.slideDown(400);
	}
	var slideUpEnabled = true;
	var mouseOverEnableSlideUp = false;
	function disableSlideUp() {
		slideUpEnabled = false;
	}
	function enableSlideUp() {
		slideUpEnabled = true;
	}
	function popoverDropdownClicked() {
		mouseOverEnableSlideUp = true;
		slideUpEnabled = false;
	}
	function popoverMouseover() {
		if (mouseOverEnableSlideUp) {
			mouseOverEnableSlideUp = false;
			slideUpEnabled = true;
		}
	}
	function filterThisMonth() {
		document.getElementById("expenseFilterDropdownLable").textContent = "Dieses Monat";
		document.getElementById("row2").style.visibility = "collapse";
		document.getElementById("row3").style.visibility = "collapse";
		document.getElementById("row4").style.visibility = "collapse";
		document.getElementById("countInfo").textContent = "(x1)";
		document.getElementById("repetitiveInfo").style.display = "inline";
	}
	function filterLastMonth() {
		document.getElementById("expenseFilterDropdownLable").textContent = "Letztes Monat";
		document.getElementById("row2").style.visibility = "visible";
		document.getElementById("row3").style.visibility = "visible";
		document.getElementById("row4").style.visibility = "visible";
		document.getElementById("countInfo").textContent = "(x1)";
		document.getElementById("repetitiveInfo").style.display = "inline";
	}
	function filter2MonthsAgo() {
		document.getElementById("expenseFilterDropdownLable").textContent = "Vorletztes Monat";
		document.getElementById("row2").style.visibility = "collapse";
		document.getElementById("row3").style.visibility = "collapse";
		document.getElementById("row4").style.visibility = "collapse";
		document.getElementById("countInfo").textContent = "(x1)";
		document.getElementById("repetitiveInfo").style.display = "inline";
	}
	function filterThisYear() {
		document.getElementById("expenseFilterDropdownLable").textContent = "Dieses Jahr";
		document.getElementById("row2").style.visibility = "visible";
		document.getElementById("row3").style.visibility = "visible";
		document.getElementById("row4").style.visibility = "visible";
		document.getElementById("countInfo").textContent = "(x12)";
		document.getElementById("repetitiveInfo").style.display = "inline";
	}
	function filterLastYear() {
		document.getElementById("expenseFilterDropdownLable").textContent = "Letztes Jahr";
		document.getElementById("row2").style.visibility = "collapse";
		document.getElementById("row3").style.visibility = "collapse";
		document.getElementById("row4").style.visibility = "collapse";
		document.getElementById("countInfo").textContent = "(x12)";
		document.getElementById("repetitiveInfo").style.display = "inline";
	}
	function noFilter() {
		document.getElementById("expenseFilterDropdownLable").textContent = "Kein Filter";
		document.getElementById("row2").style.visibility = "visible";
		document.getElementById("row3").style.visibility = "visible";
		document.getElementById("row4").style.visibility = "visible";
		document.getElementById("countInfo").textContent = "";
		document.getElementById("repetitiveInfo").style.display = "none";
	}
	function filterClothing() {
		document.getElementById("expenseFilterDropdownLabelKat").textContent = "Kleidung";
		document.getElementById("dropdownImg").src = "img/category_clothing.png";
		document.getElementById("dropdownImg").style.display = "inline";
		document.getElementById("row1").style.display = "none";
		document.getElementById("row2").style.display = "none";
		document.getElementById("row3").style.display = "";
		document.getElementById("row4").style.display = "none";
	}
	function filterFood() {
		document.getElementById("expenseFilterDropdownLabelKat").textContent = "Essen";
		document.getElementById("dropdownImg").src = "img/category_food.png";
		document.getElementById("dropdownImg").style.display = "inline";
		document.getElementById("row1").style.display = "none";
		document.getElementById("row2").style.display = "";
		document.getElementById("row3").style.display = "none";
		document.getElementById("row4").style.display = "none";
	}
	function filterGas() {
		document.getElementById("expenseFilterDropdownLabelKat").textContent = "Tanken";
		document.getElementById("dropdownImg").src = "img/category_gas.png";
		document.getElementById("dropdownImg").style.display = "inline";
		document.getElementById("row1").style.display = "none";
		document.getElementById("row2").style.display = "none";
		document.getElementById("row3").style.display = "none";
		document.getElementById("row4").style.display = "";
	}
	function noCatFilter() {
		document.getElementById("expenseFilterDropdownLabelKat").textContent = "Alle Kategorien";
		document.getElementById("dropdownImg").style.display = "none";
		document.getElementById("row1").style.display = "";
		document.getElementById("row2").style.display = "";
		document.getElementById("row3").style.display = "";
		document.getElementById("row4").style.display = "";
	}
	//-->
	</script>
</head>
<body>
	<div class="container">
		<div class="userinfo">
			Cake [<a href="index.html">logout</a>] &nbsp; <img src="img/cake.jpeg" />
		</div>
		<img alt="logo" src="img/logo_placeholder.png" class="span2" />
		<ul class="nav nav-tabs">
			<li><a href="#statistics" data-toggle="tab">Statistiken</a></li>
			<li><a href="#expenses" data-toggle="tab">Ausgaben</a></li>
			<li><a href="#categories" data-toggle="tab">Kategorien</a></li>
			<li class="active"><a href="#overview" data-toggle="tab">&Uuml;bersicht</a></li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane active" id="overview">
				<h2>66% des Budgets verbraucht, noch 9 Tage</h2>
				<div style="position:relative">
					<div style="position:absolute; top: -5px; left: 70%; text-align:center">
						<div class="divider" style="display:inline-block; height:50px; width:0px; border-right: 2px solid #555"></div>
						<br />Heute
					</div>
					<div class="progress">
						<span>noch 800&euro;</span>
						<div class="bar bar-info" style="width:66%">600&euro;</div>
					</div>
				</div>
				<br />
				<h2><a onclick='$("a[href=\"#categories\"]").click()' href="#">Kategorien</a></h2>

				<div class="progress">
					<span>noch 400&euro;</span>
					<a class="bar bar-danger" style="width:86%"><img src="img/category_clothing.png" /> Kleidung</a>
				</div>

				<div class="progress">
					<span>noch 200&euro;</span>
					<a class="bar bar-success" style="width:20%"><img src="img/category_food.png" /> Essen</a>
				</div>

				<div class="progress">
					<span>noch 200&euro;</span>
					<a class="bar bar-warning" style="width:60%"><img src="img/category_gas.png" /> Tanken</a>
				</div>
			</div>
			



			<div class="tab-pane" id="categories">
				<h1>Kategorien</h1>
				<form class="form-inline">
					<div class="well well-small clearfix">
						<label class="control-label" for="budget" style="text-align: left; height: 1em; vertical-align:middle; margin:auto">Gesamtbudget</label>
						<div class="input-append">
							<input class="input-small" id="budget" type="text" placeholder="2.000" />
							<span class="add-on">,00 &euro;</span>
						</div>
					</div>
				</form>
				<a href="#" onclick='newCategory(getElementById("lastEntryEdit"));' class="btn"><i class="icon-plus-sign"></i> Neue Kategorie</a>
				
				<form class="form-inline">
					<table class="table table-hover">
						<colgroup>
							<col class="captioncol">
							<col class="middlecol">
							<col class="pricecol">
						</colgroup>
						<thead>
							<tr>
								<th class="captioncol">Kategorie</th>
								<th class="middlecol">&Uuml;bertr&auml;gt</th>
								<th class="pricecol">
									Verf&uuml;gbar <span class="input-mini uneditable-input">500,00 &euro;</span>
								</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="captioncol">
									<div style="display:inline" class="dropdown"><a class="dropdown-toggle" id="dLabel" data-toggle="dropdown" href="#"><img src="img/category_food.png" /></a>
										<ul class="dropdown-menu" style="min-width:60px" role="menu" aria-labelledby="dLabel">
										<li stlye="display:inline"><a tabindex="-1" href="#"><img src="img/category_food.png" /></a></li>
										<li><a tabindex="-1" href="#"><img src="img/category_clothing.png" /></a></li>
										<li><a tabindex="-1" href="#"><img src="img/category_gas.png" /></a></li>
									</ul></div>

									<input class="nameedit input-small" type="text" placeholder="Essen" onblur="endEdit(this);" onkeydown="editKey(event, this);" />
									<span>Essen</span>
									<span class="hoveredit"> |
										<a href="#" onclick="showEdit(this);" rel="tooltip" title="Die Zuordnung der Ausgaben zu dieser Kategorie bleibt auch nach dem Umbenennen erhalten.">umbenennen</a> |
										<a href="#modalDelete" data-toggle="modal">l&ouml;schen</a>
									</span>
								</td>
								<td class="middlecol"><input type="checkbox" title="Restbegtrag &uuml;bertr&auml;gt sich auf n&auml;chstes Monat" /></td>
								<td class="pricecol"><div><input type="text" class="plain" value="300,00" /><span>&euro;</span></div></td>
							</tr>
							<tr>
								<td class="captioncol">
									<div style="display:inline" class="dropdown"><a class="dropdown-toggle" id="dLabel" data-toggle="dropdown" href="#"><img src="img/category_clothing.png" /></a>
										<ul class="dropdown-menu" style="min-width:60px" role="menu" aria-labelledby="dLabel">
										<li stlye="display:inline"><a tabindex="-1" href="#"><img src="img/category_food.png" /></a></li>
										<li><a tabindex="-1" href="#"><img src="img/category_clothing.png" /></a></li>
										<li><a tabindex="-1" href="#"><img src="img/category_gas.png" /></a></li>
									</ul></div>

									<input class="nameedit input-small" type="text" placeholder="Kleidung" onblur="endEdit(this);" onkeydown="editKey(event, this);" />
									<span>Kleidung</span>
									<span class="hoveredit"> |
										<a href="#" onclick="showEdit(this);" rel="tooltip" title="Die Zuordnung der Ausgaben zu dieser Kategorie bleibt auch nach dem Umbenennen erhalten.">umbenennen</a> |
										<a href="#modalDelete" data-toggle="modal">l&ouml;schen</a>
									</span>
								</td>
								<td class="middlecol"><input type="checkbox" title="Restbegtrag &uuml;bertr&auml;gt sich auf n&auml;chstes Monat" /></td>
								<td class="pricecol"><div><input type="text" class="plain" value="1.200,00" /><span>&euro;</span></div></td>
							</tr>
							<tr>
								<td class="captioncol">
									<div style="display:inline" class="dropdown"><a class="dropdown-toggle" id="dLabel" data-toggle="dropdown" href="#"><img src="img/category_gas.png" /></a>
										<ul class="dropdown-menu" style="min-width:60px" role="menu" aria-labelledby="dLabel">
										<li stlye="display:inline"><a tabindex="-1" href="#"><img src="img/category_food.png" /></a></li>
										<li><a tabindex="-1" href="#"><img src="img/category_clothing.png" /></a></li>
										<li><a tabindex="-1" href="#"><img src="img/category_gas.png" /></a></li>
									</ul></div>

									<input class="nameedit input-small" type="text" placeholder="Tanken" onblur="endEdit(this);" onkeydown="editKey(event, this);" />
									<span>Tanken</span>
									<span class="hoveredit"> |
										<a href="#" onclick="showEdit(this);" id="lastEntryEdit" rel="tooltip" title="Die Zuordnung der Ausgaben zu dieser Kategorie bleibt auch nach dem Umbenennen erhalten.">umbenennen</a> |
										<a href="#modalDelete" data-toggle="modal">l&ouml;schen</a>
									</span>
								</td>
								<td class="middlecol"><input type="checkbox" title="Restbegtrag &uuml;bertr&auml;gt sich auf n&auml;chstes Monat" /></td>
								<td class="pricecol"><div><input type="text" class="plain" value="100,00" /><span>&euro;</span></div></td>
							</tr>
						</tbody>
					</table>
				</form>
			</div>



			<div class="tab-pane" id="expenses">
				<h1>Ausgaben
					<div class="btn-group">
						<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
							<img id="dropdownImg" src="img/category_clothing.png" />
							<span id="expenseFilterDropdownLabelKat">Alle Kategorien</span>
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu" style="min-width:137px">
							<li><a href="#" onclick="noCatFilter()">Alle Kategorien</a></li>
							<li><a href="#" onclick="filterClothing()"><img src="img/category_clothing.png" /> Kleidung</a></li>
							<li><a href="#" onclick="filterFood()"><img src="img/category_food.png" /> Essen</a></li>
							<li><a href="#" onclick="filterGas()"><img src="img/category_gas.png" /> Tanken</a></li>
						</ul>
					</div>
					<small onclick='$("#expFilterForm").slideToggle(400)'>Weitere Filter<span class="caret" style="margin-left:4px; vertical-align: middle"></span></small>
				</h1>
				
				<form id="expFilterForm" class="form-inline">
					<div style="height:1px">&nbsp;</div>
					<div class="well well-small clearfix">
						<table>
						<tr>
						<td><label class="control-label" for="name_desc_filterKat" style="text-align: right;">Name/Beschreibung enth&auml;lt</label></td>
						<td><div style="margin-left:20px;margin-right:20px"><label class="control-label" for="price_rangeKat" style="text-align: right;">Preis</label></div></td>
						<td><label class="control-label" for="zeitraum_catKat" style="text-align: left;">Zeitraum</label></td>
						</tr>
						<tr>
							<td><input class="input-small" id="input_stat_filterKat" type="text" placeholder="" style="width: 90%;" data-provide="typeahead" data-items="4" data-source='["Miete","20 Hamburger","T-Shirt","Volltanken"]'/></td>
							<td><div style="margin-left:20px;margin-right:20px"><div id="slider-rangeKat"></div><input type="text" id="amountKat" style="border: 0;font-weight: bold;" readonly /></div></td>
							<td><div class="btn-group" id="zeitraum_catKat">
								<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
								<span id="expenseFilterDropdownLable">Kein Filter</span>
								<span class="caret"></span>
								</a>
								<ul class="dropdown-menu">
								<li><a href="#" onclick="filterThisMonth()">Dieses Monat</a></li>
								<li><a href="#" onclick="filterLastMonth()">Letztes Monat</a></li>
								<li><a href="#" onclick="filter2MonthsAgo()">vorletztes Monat</a></li>
								<li><a href="#" onclick="filterThisYear()">Dieses Jahr</a></li>
								<li><a href="#" onclick="filterLastYear()">Letztes Jahr</a></li>
								<li class="divider"></li>
								<li><a tabindex="-1" href="#" onclick="noFilter()">Kein Filter</a></li>
								</ul>
							</div></td>
						</tr>
						</table>
					</div>
				</form>

				<a href="#modalNewExpense" data-toggle="modal" class="btn"><i class="icon-plus-sign"></i> Neue Ausgabe</a>
				<form class="form-inline">
					<table class="table table-hover">
						<colgroup>
							<col class="captioncol">
							<col class="middlecol">
							<col class="pricecol">
						</colgroup>
						<thead>
							<tr>
								<th class="captioncol">Name</th>
								<th class="middlecol">Datum</th>
								<th class="pricecol">Wert</th>
							</tr>
						</thead>
						<tbody>
							<tr id="row1">
								<td class="captioncol">
									<div class="btn-group">
										<img src="img/category_placeholder.png" class="dropdown-toggle" data-toggle="dropdown" />
										<ul class="dropdown-menu">
											<li><a href="#"><img src="img/category_clothing.png" /> Kleidung</a></li>
											<li><a href="#"><img src="img/category_food.png" /> Essen</a></li>
											<li><a href="#"><img src="img/category_gas.png" /> Tanken</a></li>
										</ul>
									</div>
									<input class="nameedit input-small" type="text" placeholder="Miete" onblur="endEdit(this);" onkeydown="editKey(event, this);" />
									<span>Miete<span id="countInfo"></span></span>
									<span class="hoveredit"> |
										<a href="#" onclick="showEdit(this);">umbenennen</a> |
										<a href="#modalDeleteExpense" data-toggle="modal">l&ouml;schen</a>
									</span>
								</td>
								<td class="middlecol">
									<div style="position:relative;">
										<span onclick='expandPopover($("#popover1"))'>Jedes Monat</span>
										<div id ="popover1" class="datePopover" onmouseover="popoverMouseover()">
											<div class="popoverMouseSensor">
												<div class="editDate">
													<input type="text" id="expenseED1" class="input-small" onfocus="disableSlideUp()" onBlur="enableSlideUp()" />
												</div>
											</div>
											<div class="popoverDropdown">
												<label class="control-label" for="datePopoverWH1">Wiederholung</label>
												<div class="btn-group" id="datePopoverWH1">
													<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
														Monatlich<span class="caret" style="margin-left:14px;"></span>
													</a>
													<ul class="dropdown-menu" style="min-width:100px">
														<li><a href="#">Einmalig</a></li>
														<li class="divider"></li>
														<li><a href="#" onclick="popoverDropdownClicked()">T&auml;glich</a></li>
														<li><a href="#" onclick="popoverDropdownClicked()">W&ouml;chentlich</a></li>
														<li><a href="#" onclick="popoverDropdownClicked()">Monatlich</a></li>
														<li><a href="#" onclick="popoverDropdownClicked()">J&auml;hrlich</a></li>
													</ul>
												</div>
											</div>
											<div class="popoverEdit">
												<label class="control-label" for="datePopoverED1">Enddatum</label>
												<input type="text" id="datePopoverED1" class="input-small" onfocus="disableSlideUp()" onBlur="enableSlideUp()" />
											</div>
										</div>
									</div>
								</td>
								<td class="pricecol"><div><span id="repetitiveInfo">je</span> <input type="text" class="plain" value="600,00" /><span>&euro;</span></div></td>
							</tr>
							<tr id="row2">
								<td class="captioncol">
									<div class="btn-group">
										<img src="img/category_food.png" class="dropdown-toggle" data-toggle="dropdown" />
										<ul class="dropdown-menu">
											<li><a href="#"><img src="img/category_clothing.png" /> Kleidung</a></li>
											<li><a href="#"><img src="img/category_food.png" /> Essen</a></li>
											<li><a href="#"><img src="img/category_gas.png" /> Tanken</a></li>
										</ul>
									</div>
									<input class="nameedit input-small" type="text" placeholder="20 Hamburger" onblur="endEdit(this);" onkeydown="editKey(event, this);" />
									<span>20 Hamburger</span>
									<span class="hoveredit"> |
										<a href="#" onclick="showEdit(this);">umbenennen</a> |
										<a href="#modalDeleteExpense" data-toggle="modal">l&ouml;schen</a>
									</span>
								</td>
								<td class="middlecol">
									<div style="position:relative;">
										<span onclick='expandPopover($("#popover2"))'>22.11.2012</span>
										<div id ="popover2" class="datePopover" onmouseover="popoverMouseover()">
											<div class="popoverMouseSensor">
												<div class="editDate">
													<input type="text" id="expenseED2" class="input-small" onfocus="disableSlideUp()" onBlur="enableSlideUp()" />
												</div>
											</div>
											<div class="popoverDropdown">
												<label class="control-label" for="datePopoverWH2">Wiederholung</label>
												<div class="btn-group" id="datePopoverWH2">
													<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
														Monatlich<span class="caret" style="margin-left:14px;"></span>
													</a>
													<ul class="dropdown-menu" style="min-width:100px">
														<li><a href="#">Einmalig</a></li>
														<li class="divider"></li>
														<li><a href="#" onclick="popoverDropdownClicked()">T&auml;glich</a></li>
														<li><a href="#" onclick="popoverDropdownClicked()">W&ouml;chentlich</a></li>
														<li><a href="#" onclick="popoverDropdownClicked()">Monatlich</a></li>
														<li><a href="#" onclick="popoverDropdownClicked()">J&auml;hrlich</a></li>
													</ul>
												</div>
											</div>
											<div class="popoverEdit">
												<label class="control-label" for="datePopoverED2">Enddatum</label>
												<input type="text" id="datePopoverED2" class="input-small" onfocus="disableSlideUp()" onBlur="enableSlideUp()" />
											</div>
										</div>
									</div>
								</td>
								<td class="pricecol"><div><input type="text" class="plain" value="20,00" /><span>&euro;</span></div></td>
							</tr>
							<tr id="row3">
								<td class="captioncol">
									<div class="btn-group">
										<img src="img/category_clothing.png" class="dropdown-toggle" data-toggle="dropdown" />
										<ul class="dropdown-menu">
											<li><a href="#"><img src="img/category_clothing.png" /> Kleidung</a></li>
											<li><a href="#"><img src="img/category_food.png" /> Essen</a></li>
											<li><a href="#"><img src="img/category_gas.png" /> Tanken</a></li>
										</ul>
									</div>
									<input class="nameedit input-small" type="text" placeholder="T-Shirt" onblur="endEdit(this);" onkeydown="editKey(event, this);" />
									<span>T-Shirt</span>
									<span class="hoveredit"> |
										<a href="#" onclick="showEdit(this);">umbenennen</a> |
										<a href="#modalDeleteExpense" data-toggle="modal">l&ouml;schen</a>
									</span>
								</td>
								<td class="middlecol">
									<div style="position:relative;">
										<span onclick='expandPopover($("#popover3"))'>25.11.2012</span>
										<div id ="popover3" class="datePopover" onmouseover="popoverMouseover()">
											<div class="popoverMouseSensor">
												<div class="editDate">
													<input type="text" id="expenseED3" class="input-small" onfocus="disableSlideUp()" onBlur="enableSlideUp()" />
												</div>
											</div>
											<div class="popoverDropdown">
												<label class="control-label" for="datePopoverWH3">Wiederholung</label>
												<div class="btn-group" id="datePopoverWH3">
													<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
														Monatlich<span class="caret" style="margin-left:14px;"></span>
													</a>
													<ul class="dropdown-menu" style="min-width:100px">
														<li><a href="#">Einmalig</a></li>
														<li class="divider"></li>
														<li><a href="#" onclick="popoverDropdownClicked()">T&auml;glich</a></li>
														<li><a href="#" onclick="popoverDropdownClicked()">W&ouml;chentlich</a></li>
														<li><a href="#" onclick="popoverDropdownClicked()">Monatlich</a></li>
														<li><a href="#" onclick="popoverDropdownClicked()">J&auml;hrlich</a></li>
													</ul>
												</div>
											</div>
											<div class="popoverEdit">
												<label class="control-label" for="datePopoverED3">Enddatum</label>
												<input type="text" id="datePopoverED3" class="input-small" onfocus="disableSlideUp()" onBlur="enableSlideUp()" />
											</div>
										</div>
									</div>
								</td>
								<td class="pricecol"><div><input type="text" class="plain" value="20,00" /><span>&euro;</span></div></td>
							</tr>
							<tr id="row4">
								<td class="captioncol">
									<div class="btn-group">
										<img src="img/category_gas.png" class="dropdown-toggle" data-toggle="dropdown" />
										<ul class="dropdown-menu">
											<li><a href="#"><img src="img/category_clothing.png" /> Kleidung</a></li>
											<li><a href="#"><img src="img/category_food.png" /> Essen</a></li>
											<li><a href="#"><img src="img/category_gas.png" /> Tanken</a></li>
										</ul>
									</div>
									<input class="nameedit input-small" type="text" placeholder="Volltanken" onblur="endEdit(this);" onkeydown="editKey(event, this);" />
									<span>Volltanken</span>
									<span class="hoveredit"> |
										<a href="#" onclick="showEdit(this);">umbenennen</a> |
										<a href="#modalDeleteExpense" data-toggle="modal">l&ouml;schen</a>
									</span>
								</td>
								<td class="middlecol">
									<div style="position:relative;">
										<span onclick='expandPopover($("#popover4"))'>26.11.2012</span>
										<div id ="popover4" class="datePopover" onmouseover="popoverMouseover()">
											<div class="popoverMouseSensor">
												<div class="editDate">
													<input type="text" id="expenseED4" class="input-small" onfocus="disableSlideUp()" onBlur="enableSlideUp()" />
												</div>
											</div>
											<div class="popoverDropdown">
												<label class="control-label" for="datePopoverWH4">Wiederholung</label>
												<div class="btn-group" id="datePopoverWH4">
													<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
														Monatlich<span class="caret" style="margin-left:14px;"></span>
													</a>
													<ul class="dropdown-menu" style="min-width:100px">
														<li><a href="#">Einmalig</a></li>
														<li class="divider"></li>
														<li><a href="#" onclick="popoverDropdownClicked()">T&auml;glich</a></li>
														<li><a href="#" onclick="popoverDropdownClicked()">W&ouml;chentlich</a></li>
														<li><a href="#" onclick="popoverDropdownClicked()">Monatlich</a></li>
														<li><a href="#" onclick="popoverDropdownClicked()">J&auml;hrlich</a></li>
													</ul>
												</div>
											</div>
											<div class="popoverEdit">
												<label class="control-label" for="datePopoverED4">Enddatum</label>
												<input type="text" id="datePopoverED4" class="input-small" onfocus="disableSlideUp()" onBlur="enableSlideUp()" />
											</div>
										</div>
									</div>
								</td>
								<td class="pricecol"><div><input type="text" class="plain" value="60,00" /><span>&euro;</span></div></td>
							</tr>
						</tbody>
					</table>
				</form>
			</div>

			
			<div class="tab-pane" id="statistics">
				<h1 id="statHeadline">Ausgaben im letzten Monat</h1>
				<div class="btn-group" data-toggle="buttons-radio" style="margin-bottom:10px">
					<button type="button" class="btn btn-primary" onclick="switchToByTime()">Nach Zeit</button>
					<button type="button" class="btn btn-primary" onclick="switchToByCategory()">Nach Kategorie</button>
				</div>
				<br />
				<div id="stat_by_time" style="display:block">
					<form class="form-inline">
							<div class="well well-small clearfix">
								<table>
								<tr>
								<td><label class="control-label" for="zeitraum" style="text-align: left;">Zeitraum</label></td>
								<td><label class="control-label" for="diagrammtyp" style="text-align: right;">Diagrammtyp</label></td>
								</tr>
								<td><div class="btn-group" id="zeitraum">
									<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
									Letztes Monat
									<span class="caret"></span>
									</a>
									<ul class="dropdown-menu">
									<li><a tabindex="-1" href="#">Dieses Monat</a></li>
									<li><a tabindex="-1" href="#">vorletztes Monat</a></li>
									<li><a tabindex="-1" href="#">Dieses Jahr</a></li>
									<li><a tabindex="-1" href="#">Letztes Jahr</a></li>
									<li class="divider"></li>
									<li><a tabindex="-1" href="#">Immer</a></li>
									</ul>
								</div></td>
								<td><div class="btn-group" id="diagrammtyp">
									<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
									<span id="diagrammtyp_label">Kreisdiagramm</span>
									<span class="caret"></span>
									</a>
									<ul class="dropdown-menu">
									<li><a tabindex="-1" onclick="switchToPiechart()" href="#">Kreisdiagramm</a></li>
									<li><a tabindex="-1" onclick="switchToBarschart()" href="#">Balkendiagramm</a></li>
									</ul>
								</div></td>
								</table>
							</div>
						</form>
						<div id="pie" style="display:block">
							<img src="img/PieChart.png" alt="Pie-Chart"/>
						</div>
						<div class="tab-pane active" id="bars" style="display:none">
							
							<div class="progress">
								<span>860&euro;</span>
								<a class="bar bar-danger" style="width:86%"><img src="img/category_clothing.png" /> Kleidung</a>
							</div>

							<div class="progress">
								<span>600&euro;</span>
								<a class="bar bar-warning" style="width:60%"><img src="img/category_gas.png" /> Tanken</a>
							</div>
							
							<div class="progress">
								<span>200&euro;</span>
								<a class="bar bar-success" style="width:20%"><img src="img/category_food.png" /> Essen</a>
							</div>

						</div>
					</div>
					
					<div id="stat_by_category" style="display:none">
						<form class="form-inline">
							<div class="well well-small clearfix">
								<table>
								<tr>
								<td><label class="control-label" for="name_desc_filter" style="text-align: right;">Name/Beschreibung enth&auml;lt</label></td>
								<td><div style="margin-left:20px;margin-right:20px"><label class="control-label">Preis</label></div></td>
								<td><label class="control-label" for="zeitraum_cat" style="text-align: left;">Zeitraum</label></td>
								</tr>
								<tr>
									<td><input class="input-small" id="input_stat_filter" type="text" placeholder="" style="width: 90%;" data-provide="typeahead" data-items="4" data-source='["Miete","20 Hamburger","T-Shirt","Volltanken"]'/></td>
									<td><div style="margin-left:20px;margin-right:20px"><div id="slider-range"></div><input type="text" id="amount" style="border: 0; font-weight: bold;" readonly /></div></td>
									<td><div class="btn-group" id="zeitraum_cat">
										<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
										Letztes Quartal
										<span class="caret"></span>
										</a>
										<ul class="dropdown-menu">
										<li><a tabindex="-1" href="#">Letztes Monat</a></li>
										<li><a tabindex="-1" href="#">Dieses Monat</a></li>
										<li><a tabindex="-1" href="#">vorletztes Monat</a></li>
										<li><a tabindex="-1" href="#">Letztes Quartal</a></li>
										<li><a tabindex="-1" href="#">Dieses Jahr</a></li>
										<li><a tabindex="-1" href="#">Letztes Jahr</a></li>
										<li class="divider"></li>
										<li><a tabindex="-1" href="#">Immer</a></li>
										</ul>
									</div></td>
								</tr>
								</table>
							</div>
						</form>
						<div id="area_chart">
							<img src="img/AreaChart.png" alt="Area-Chart"/>
						</div>
					
					</div>
					
			</div>
		</div>
	</div>
	
	
	<div id="modalDelete" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>L&ouml;schen</h3>
		</div>
		<div class="modal-body">
			<p>Wollen Sie diese Kategorie wirklich l&ouml;schen?</p>
			<p>Alle Ausgaben dieser Kategorie bleiben erhalten und werden weiterhin in der Statistik angezeigt.</p>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Abbrechen</button>
			<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">L&ouml;schen</button>
		</div>
	</div>
	
	<div id="modalDeleteExpense" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>L&ouml;schen</h3>
		</div>
		<div class="modal-body">
			<p>Wollen Sie diese Ausgabe wirklich l&ouml;schen?</p>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Abbrechen</button>
			<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">L&ouml;schen</button>
		</div>
	</div>
	
	<div id="modalNewExpense" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>Neue Ausgabe</h3>
		</div>
		<div class="modal-body">
			<form class="form-horizontal">
				<div class="control-group">
					<label class="control-label" for="modalInputName">Name</label>
					<div class="controls">
						<input type="text" id="modalInputName" class="span2" data-provide="typeahead" data-items="4" data-source='["Miete","20 Hamburger","T-Shirt","Volltanken"]' />
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="modalInputCategory">Kategorie</label>
					<div class="controls">
						<div class="btn-group" id="modalInputCategory">
							<a class="btn dropdown-toggle" style="width:114px; text-align:left" data-toggle="dropdown" href="#">
								<img src="img/category_clothing.png" />
								Kleidung
								<span class="caret" style="float:right"></span>
							</a>
							<ul class="dropdown-menu" style="min-width:137px">
								<li><a href="#"><img src="img/category_clothing.png" /> Kleidung</a></li>
								<li><a href="#"><img src="img/category_food.png" /> Essen</a></li>
								<li><a href="#"><img src="img/category_gas.png" /> Tanken</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="modalInputValue">Wert</label>
					<div class="controls">
						<div class="input-append">
							<input type="text" id="modalInputValue" style="width:100px;" />
							<span class="add-on">&euro;</span>
						</div>
					</div>
				</div>
				<br />
				<div class="control-group">
					<label class="control-label" for="modalInputDate">Datum</label>
					<div class="controls">
						<input type="text" id="modalInputDate" class="span2" />
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="modalInputRepeat">Wiederholung</label>
					<div class="controls">
						<div class="btn-group" id="modalInputRepeat">
							<a class="btn dropdown-toggle" style="width:114px; text-align:left" data-toggle="dropdown" href="#">
								Monatlich<span class="caret" style="float:right"></span>
							</a>
							<ul class="dropdown-menu" style="min-width:137px">
								<li><a href="#">Einmalig</a></li>
								<li><a href="#">T&auml;glich</a></li>
								<li><a href="#">W&ouml;chentlich</a></li>
								<li><a href="#">Monatlich</a></li>
								<li><a href="#">J&auml;hrlich</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="modalInputEnddate">Enddatum</label>
					<div class="controls">
						<input type="text" id="modalInputEnddate" class="span2" />
					</div>
				</div>
				<br />
				<br />
			</form>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Abbrechen</button>
			<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Speichern</button>
		</div>
	</div>
	
	
	
	<script src="js/jquery-1.8.3.js"></script>
	<script src="js/jquery-ui-1.9.2.custom.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<!--<script src="http://code.jquery.com/jquery-1.8.3.js"></script>-->
	<script>
	$(function() {
        $( "#slider-rangeKat" ).slider({
            range: true,
            min: 0,
            max: 100,
            values: [ 50, 1000 ],
            slide: function( event, ui ) {
            	var maxExpense = 5000;
            	
            	maxExpense = maxExpense - 100;
            	var uGrenze = ui.values[0];
            	uGrenze = uGrenze + uGrenze * uGrenze * uGrenze / 1000000 * maxExpense;
            	var oGrenze = ui.values[1];
            	oGrenze = oGrenze + oGrenze * oGrenze * oGrenze / 1000000 * maxExpense;
            	uGrenze = Math.floor(uGrenze);
            	oGrenze = Math.floor(oGrenze);
                $( "#amountKat" ).val( uGrenze + "\u20AC - " + oGrenze + "\u20AC" );
            }
        });
        $( "#amountKat" ).val("662\u20AC - 5000\u20AC");
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 100,
            values: [ 50, 1000 ],
            slide: function( event, ui ) {
            	var maxExpense = 5000;
            	
            	maxExpense = maxExpense - 100;
            	var uGrenze = ui.values[0];
            	uGrenze = uGrenze + uGrenze * uGrenze * uGrenze / 1000000 * maxExpense;
            	var oGrenze = ui.values[1];
            	oGrenze = oGrenze + oGrenze * oGrenze * oGrenze / 1000000 * maxExpense;
            	uGrenze = Math.floor(uGrenze);
            	oGrenze = Math.floor(oGrenze);
                $( "#amount" ).val( uGrenze + "\u20AC - " + oGrenze + "\u20AC" );
            }
        });
        $( "#amount" ).val("662\u20AC - 5000\u20AC");
    });
	$(function() {
		$("#modalInputDate").datepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: "dd.mm.yy"
		});
		$("#modalInputEnddate").datepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: "dd.mm.yy"
		});
		$("#datePopoverED1").datepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: "dd.mm.yy"
		});
		$("#datePopoverED2").datepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: "dd.mm.yy"
		});
		$("#datePopoverED3").datepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: "dd.mm.yy"
		});
		$("#datePopoverED4").datepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: "dd.mm.yy"
		});
		$("#expenseED1").datepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: "dd.mm.yy"
		});
		$("#expenseED2").datepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: "dd.mm.yy"
		});
		$("#expenseED3").datepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: "dd.mm.yy"
		});
		$("#expenseED4").datepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: "dd.mm.yy"
		});
	});
	$('#modalNewExpense').on('shown', function() {
		$('#modalInputName')[0].focus();
	});
    $('#popover1').mouseleave(function() {
    	if (slideUpEnabled) {
    		$('#popover1').slideUp(400);
    	}
    });
    $('#popover2').mouseleave(function() {
    	if (slideUpEnabled) {
    		$('#popover2').slideUp(400);
    	}
    });
    $('#popover3').mouseleave(function() {
    	if (slideUpEnabled) {
    		$('#popover3').slideUp(400);
    	}
    });
    $('#popover4').mouseleave(function() {
    	if (slideUpEnabled) {
    		$('#popover4').slideUp(400);
    	}
    });
    $('#expFilterForm').on('hide', function() {
    	$('#expFilterForm')[0].style.overflow='hidden';
    });
    $('#expFilterForm').on('shown', function() {
    	$('#expFilterForm')[0].style.overflow='visible';
    });

    // Uebersicht - verlinkte Kategorien-Bars
    $('#overview .progress')[0].onclick = function() {
    	$('a[href="#expenses"]').click();
    	noCatFilter();
    }
    $('#overview .progress')[1].onclick = function() {
    	$('a[href="#expenses"]').click();
    	filterClothing();
    }
    $('#overview .progress')[2].onclick = function() {
    	$('a[href="#expenses"]').click();
    	filterFood();
    }
    $('#overview .progress')[3].onclick = function() {
    	$('a[href="#expenses"]').click();
    	filterGas();
    }
	
	//balkendiagramm links
	$('#bars .progress')[0].onclick = function() {
    	$('a[href="#expenses"]').click();
    	filterClothing();
    }
    $('#bars .progress')[2].onclick = function() {
    	$('a[href="#expenses"]').click();
    	filterFood();
    }
    $('#bars .progress')[1].onclick = function() {
    	$('a[href="#expenses"]').click();
    	filterGas();
    }
	
    $('.pricecol div').mouseenter(function() {
		this.className = 'input-append';
		$(this).find('input')[0].className = '';
    	$(this).find('span').last()[0].className = 'add-on';
    });
    $('.pricecol div').mouseleave(function() {
    	this.className = '';
    	$(this).find('input')[0].className = 'plain';
    	$(this).find('span').last()[0].className = '';
    	$(this).find('input')[0].blur();
    });
	</script>
</body>
</html>